<template>
    <view class="user" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar title="意见反馈"></nav-bar>
        <view class="title">
            <view class="name">
                尊敬的{{ userInfo.name }}
            </view>
            <view class="text">
                请填写您的意见表单。
            </view>
            <view class="text">
                我们会在3个工作日内回复您。
            </view>
            <image class="bg-img" 
			    src="http://oss.antaimedical.com/images/pro/2024/10/671f51b8e4b0be9d444233b4McClSriMy68tb537b70e15cf2bc343726e09e0354b5b.png"
			    ></image>
        </view>
        <view class="c-cantainer">
            <view @click=" feedbackTypeShowModal = true">
                <u-input inputAlign="right" readonly v-model=" feedbackTypeName ">
                    <template slot="prefix">
                        <text class="prefix">类型</text>
                    </template>
                    <template slot="suffix">
                        <u-icon name="arrow-right" color="#c5c5c5" size="18"></u-icon>
                    </template>
                </u-input>
            </view>
            <view @click=" handleShowFeedbackModule()">
                <u-input inputAlign="right" readonly v-model=" feedbackModuleName ">
                    <template slot="prefix">
                        <text class="prefix">板块</text>
                    </template>
                    <template slot="suffix">
                        <u-icon name="arrow-right" color="#c5c5c5" size="18"></u-icon>
                    </template>
                </u-input>
            </view>
            <view class="border"></view>
            <view class="item">
                <view class="label-box">
                    意见详情描述
                </view>
                <u-textarea height="200" v-model=" feedbackForm.feedbackDetail " placeholder="请输入内容"></u-textarea>
            </view>

        </view>
        <view class="fixed-box">
            <view class="text">如需人工处理，可以在【我的】菜单中，点击【联系客服】获取客服企业微信</view>
            <view class="btn-box">
                <view class="cancel-text" @click=" goBack ">
                    返回
                </view>
                <view class="confirm-text" @click=" confirm ">
                    提交
                </view>
            </view>
        </view>
        <myPicker :show=" feedbackTypeShowModal " :columns=' feedbackTypeColumns '
            @close="feedbackTypeShowModal = false" keyName="label" closeOnClickOverlay
            @cancel="feedbackTypeShowModal = false" @confirm=" handlefeedbackTypeConfirm ">
        </myPicker>
        <myPicker :show=" feedbackModuleShowModal " :columns=' feedbackModuleColumns '
            @close="feedbackModuleShowModal = false" keyName="label" closeOnClickOverlay
            @cancel="feedbackModuleShowModal = false" @confirm=" handlefeedbackModuleConfirm ">
        </myPicker>
    </view>
</template>

<script>
import {
    addUserFeedback,
    findFeedbackType,
    findFeedbackModule,
} from '@/api/index.js'
import {
    mapState
} from 'vuex'
export default {
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            userId: uni.getStorageSync('userId'),
            feedbackTypeShowModal: false,
            feedbackTypeColumns: [],
            feedbackModuleShowModal: false,
            feedbackModuleColumns: [],
            value1: '',
            feedbackForm: {
                feedbackDetail: '',
                feedbackModuleId: '',
                feedbackTypeId: '',
            },
            feedbackTypeName: '',
            feedbackModuleName: '',
            feedbackTypeObj: {}
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo
        }),
    },
    onLoad () {
        this.init()
    },
    methods: {
        init () {
            findFeedbackType().then((res) => {
                let arr = []
                let obj = {}
                res.data.forEach((item, index) => {
                    if (!item.parentId) {
                        obj[item.id] = []
                        arr.push(
                            {
                                value: item.id,
                                label: item.typeName
                            }
                        )
                    }
                })
                res.data.forEach((item, index) => {
                    if (item.parentId) {
                        obj[item.parentId].push({
                            value: item.id,
                            label: item.moduleName
                        })
                    }

                })
                this.feedbackTypeObj = obj
                this.feedbackTypeColumns.push(arr)
            }).catch((err) => {

            })

        },
        //确认类型
        handlefeedbackTypeConfirm (v) {
            this.feedbackTypeShowModal = false
            this.feedbackForm.feedbackTypeId = v.value[0].value
            this.feedbackTypeName = v.value[0].label
            this.feedbackForm.feedbackModuleId = ''
            this.feedbackModuleName = ''
        },
        //确认板块
        handlefeedbackModuleConfirm (v) {
            this.feedbackModuleShowModal = false
            this.feedbackForm.feedbackModuleId = v.value[0].value
            this.feedbackModuleName = v.value[0].label
        },
        //板块弹窗
        handleShowFeedbackModule () {
            if (this.feedbackForm.feedbackTypeId) {
                this.feedbackModuleShowModal = true
                this.feedbackModuleColumns = [this.feedbackTypeObj[this.feedbackForm.feedbackTypeId]]
            }
        },
        // 提交反馈
        confirm () {
            let verify = {
                feedbackTypeId: '请选择类型',
                feedbackModuleId: '请选择板块',
                feedbackDetail: '请输入反馈内容',
            }
            for (const key in this.feedbackForm) {
                if (Object.hasOwnProperty.call(this.feedbackForm, key)) {
                    const element = this.feedbackForm[key];
                    if (!element) {
                        return uni.showToast({
                            icon:'none',
                            title: verify[key]
                        })
                    }
                }
            }
            let params = {
                ...this.feedbackForm,
                userId: this.userInfo.userId
            }
            addUserFeedback(params).then((res) => {
                uni.showModal({
                    title: '提示',
                    content: `感谢您的意见，我们会在3个工作日内回复您，请留意【我的】-【消息】编号为${res.data}的意见反馈消息`,
                    showCancel: false,
                    confirmText: '确认',
                    success: async () => {
                        this.goBack()
                    }
                })
            }).catch((err) => {})
        },
        goBack () {
            uni.navigateBack({
                delta: 1 // 默认值是1，表示回到上一页
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.user {
    background: #E3E8FF;
    padding: 0 48rpx 48rpx;
    min-height: 100vh;
    .title {
        margin-top: 62rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        text-align: left;
        position: relative;
        .bg-img{
            width: 200rpx;
            height: 200rpx;
            position: absolute;
            right: 0;
            top: 24rpx;
            z-index: 1;
        }
        .name {
            margin-bottom: 16rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 48rpx;
            color: #333333;
            text-align: left;
        }
        .text{
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            text-align: left;
            margin-top: 12rpx;

        }
    }


    .c-cantainer {
        position: relative;
        z-index: 2;
        margin-top: 32rpx;
        width: 100%;
        background-color: rgba($color: #ffffff, $alpha: .9);
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        padding: 32rpx;
        /deep/.u-input {
            padding-bottom: 20rpx !important;
            border: 0;
            height: 82rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            .u-input__content {
                line-height: 82rpx !important;
            }
        }

        .prefix {
            font-size: 28rpx;
            color: #666666;
        }
        .border{
            margin: 32rpx 20rpx;
            border-bottom: 2rpx solid #E6EBF5;
        }
        .item {
            margin-top: 48rpx;
            padding: 0 20rpx 0;

            /deep/.u-textarea {
                text-align: left;
                margin-top: 20rpx;
                background: #F4F4F4;
                border: 0;
                border-radius: 32rpx 32rpx 32rpx 32rpx;
                padding: 32rpx 48rpx;
            }
            .label-box {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #666666;
                margin-bottom: 24rpx;
                text-align: left;
            }
        }

    }
    .fixed-box{
        position: fixed;
        width: 654rpx;
        bottom: 68rpx;
        left: 50%;
        transform: translateX(-50%);
        .text{
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            text-align: left;
        }
    }
    .btn-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10rpx;
        .cancel-text {
            width: 327rpx;
            height: 88rpx;
            background: #FFFFFF;
            border-radius: 32rpx;
            border: 4rpx solid #545DDE;
            color: #545DDE;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 44rpx;
        }

        .confirm-text {
            width: 327rpx;
            height: 88rpx;
            background: #545DDE;
            border-radius: 32rpx;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>